<template>
    <div :class="$style.tablePager">
        <div class="cusPaignationLeft" v-if="showTotal">
            <slot name="total"> 共 {{ total }} 条 </slot>
        </div>
        <el-pagination
            :layout="layout"
            @current-change="change"
            @size-change="handleSizeChange"
            v-if="showPager"
            background
            :current-page="current"
            :page-sizes="[10,15, 20, 50]"
            :page-size="size"
            :total="total"
            class="cusPaignation"
            small
        >
            <slot />
        </el-pagination>
        
    </div>
</template>
<script>
export default {
    props: {
        size: {
            type: Number,
            default: 10,
        },
        total: {
            type: Number,
            default: 0,
        },
        current: {
            type: Number,
            default: 1,
        },
        showTotal: {
            type: Boolean,
            default: true
        },
        pageChange: {
            type: Function,
            default: () => {}
        },
        sizeChange:{
            type: Function,
            default: () => {}
        },
        layout: {
            type: String,
            default: "prev, pager, next, jumper"
        }
    },
    data() {
        return {
            showPager: true,
        }
    },
    methods: {
        change(val) {
            this.pageChange(val)
            // this.$emit('pageChange', val)
        },
        handleSizeChange(val){
            this.sizeChange(val)
        },
    },
    watch: {
        total: {
            handler(newVal) {
                if (newVal > 1) {
                    this.showPager = false
                    this.$nextTick(() => {
                        this.showPager = true
                    })
                }
            },
            immediate: true,
        },
    },
}
</script>
<style lang="scss" module>

.tablePager{
    box-sizing: border-box;
    width: 100%;
    padding: 20px 0 0 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    &::after {
        content: '';
        display: block;
        clear: both;
    }

  :global{

    .cusPaignationLeft {
        float: left;
        font-size: 12px;
        color: #373d44;
        line-height: 22px;
    }

    .cusPaignation {
        float: right;
    }

    .el-pagination {
        white-space: normal !important;
        width: auto;
        .el-pager li {
            height: 23px;
            line-height: 23px;
            &.active {
                background: #038fee;
                color: #fff;
                // border-radius: 50%;
                margin-top: 0px;
            }
        }
    }

  }
}

// .cus-paignation-con {
//     width: 100%;
//     &::after {
//         content: '';
//         display: block;
//         clear: both;
//     }
//     .cus-paignation-left {
//         float: left;
//         font-size: 12px;
//         color: #373d44;
//         line-height: 22px;
//     }
//     .cus-paignation {
//         float: right;
//     }
//     .el-pagination {
//         width: auto;
//         .el-pager li {
//             height: 23px;
//             line-height: 23px;
//             &.active {
//                 background: #038fee;
//                 color: #fff;
//                 border-radius: 50%;
//                 margin-top: 0px;
//             }
//         }
//     }
// }
</style>
